<template>
  <div class="center">
    
    <!-- 头部区域 -->
    <mt-header fixed title="固定在顶部"></mt-header>

    <!-- 中间的主要区域 -->

    <transition mode="out-in">
      <router-view></router-view>
    </transition>

    <!-- 底部区域 -->
    <mt-tabbar></mt-tabbar>

  </div>
</template>

<script>
import tabbar from 'components/tabbar'

export default {
  name: 'App',
  components:{
    'mt-tabbar':tabbar,
  },
  
}
</script>

<style>
html,body{
  height: 100%;
}
.center{
  padding: 40px 0 50px;
  overflow-x: hidden;
  height: 100%;
}
p{
  font-size: 20px;
}
.v-enter,.v-leave-to{
  opacity: 0;
  transform:translateY(50%);
}
.v-enter-active,.v-leave-active{
  transition:all 0.3s ease;
}
</style>
